/* 全局图片样式设置 */
.vp-doc img {
  max-height: 50vh;
  /* 最大高度为视口高度的50% */
  width: auto;
  /* 保持宽高比 */
  display: block;
  margin: 1.5rem auto;
  /* 居中显示，上下留白 */
}

/* 图片说明文字样式 */
.vp-doc img+em {
  display: block;
  text-align: center;
  color: var(--vp-c-text-2);
  font-size: 0.9em;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
}

/* ============================================================================
   VitePress 布局相关 CSS 变量参考
   ============================================================================

   本节列出了 VitePress 默认主题中所有与布局相关的 CSS 变量。
   你可以在 :root 选择器中覆盖这些变量来自定义布局。

   来源：https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. 整体布局宽度 (Layout Width)
   ---------------------------------------------------------------------------- */

:root {
  /* 页面整体最大宽度
   * 默认值：1440px
   * 说明：控制整个页面内容的最大宽度，包括侧边栏和主内容区域
   *
   * 💡 调整内容区域宽度的主要变量
   *
   * 示例 1：增加内容宽度到 90% 视口宽度
   * --vp-layout-max-width: 90%;
   *
   * 示例 2：固定宽度为 1600px
   * --vp-layout-max-width: 1600px;
   *
   * 示例 3：使用 calc() 动态计算（视口宽度减去固定边距）
   * --vp-layout-max-width: calc(100vw - 100px);
   *
   * ⚠️ 注意事项：
   * - 修改此变量会影响整个页面的宽度，包括导航栏、侧边栏和内容区域
   * - 在小屏幕设备上，VitePress 会自动调整布局为响应式
   * - 建议值范围：1200px - 1800px（固定宽度）或 80% - 95%（百分比）
   */
  --vp-layout-max-width: 95%;
}

/* ----------------------------------------------------------------------------
   2. 侧边栏 (Sidebar)
   ---------------------------------------------------------------------------- */

/* 侧边栏宽度
 * 默认值：272px
 * 说明：控制左侧导航侧边栏的宽度
 *
 * 示例：增加侧边栏宽度
 * :root {
 *   --vp-sidebar-width: 320px;
 * }
 *
 * 💡 提示：
 * - 侧边栏宽度会影响主内容区域的可用宽度
 * - 实际内容宽度 = --vp-layout-max-width - --vp-sidebar-width
 * - 在移动设备上（< 960px），侧边栏会自动折叠为抽屉式菜单
 */
/* --vp-sidebar-width: 272px; */

:root {
  --vp-sidebar-width: 300px;
}

/* 侧边栏背景色
 * 默认值：var(--vp-c-bg-alt)
 * 说明：侧边栏的背景颜色，默认使用次要背景色
 */
/* --vp-sidebar-bg-color: var(--vp-c-bg-alt); */

/* ----------------------------------------------------------------------------
   3. 导航栏 (Navigation Bar)
   ---------------------------------------------------------------------------- */

/* 导航栏高度
 * 默认值：64px
 * 说明：顶部导航栏的高度
 *
 * 示例：减小导航栏高度
 * :root {
 *   --vp-nav-height: 56px;
 * }
 */
/* --vp-nav-height: 64px; */

/* 导航栏背景色
 * 默认值：var(--vp-c-bg)
 * 说明：导航栏的背景颜色
 */
/* --vp-nav-bg-color: var(--vp-c-bg); */

/* 导航栏全屏菜单背景色
 * 默认值：var(--vp-c-bg)
 * 说明：移动设备上展开菜单时的背景色
 */
/* --vp-nav-screen-bg-color: var(--vp-c-bg); */

/* 导航栏 Logo 高度
 * 默认值：24px
 * 说明：导航栏中 Logo 图片的高度
 */
/* --vp-nav-logo-height: 24px; */

/* ----------------------------------------------------------------------------
   4. 本地导航 (Local Navigation)
   ---------------------------------------------------------------------------- */

/* 本地导航背景色
 * 默认值：var(--vp-c-bg)
 * 说明：页面内导航（如目录）的背景色
 */
/* --vp-local-nav-bg-color: var(--vp-c-bg); */

/* ----------------------------------------------------------------------------
   5. 层级控制 (Z-Index)
   ---------------------------------------------------------------------------- */

/* 页脚层级
 * 默认值：10
 * 说明：页脚的 z-index 值
 */
/* --vp-z-index-footer: 10; */

/* 本地导航层级
 * 默认值：20
 * 说明：页面内导航的 z-index 值
 */
/* --vp-z-index-local-nav: 20; */

/* 顶部导航栏层级
 * 默认值：30
 * 说明：顶部导航栏的 z-index 值
 */
/* --vp-z-index-nav: 30; */

/* 布局顶层层级
 * 默认值：40
 * 说明：布局顶层元素的 z-index 值
 */
/* --vp-z-index-layout-top: 40; */

/* 遮罩层层级
 * 默认值：50
 * 说明：模态框遮罩的 z-index 值
 */
/* --vp-z-index-backdrop: 50; */

/* 侧边栏层级
 * 默认值：60（移动设备）/ 25（桌面设备 >= 960px）
 * 说明：侧边栏的 z-index 值，在不同屏幕尺寸下有不同的值
 *
 * 响应式调整：
 * @media (min-width: 960px) {
 *   :root {
 *     --vp-z-index-sidebar: 25;
 *   }
 * }
 */
/* --vp-z-index-sidebar: 60; */

/* ----------------------------------------------------------------------------
   6. 遮罩层 (Backdrop)
   ---------------------------------------------------------------------------- */

/* 遮罩层背景色
 * 默认值：rgba(0, 0, 0, 0.6)
 * 说明：模态框、抽屉等组件的半透明遮罩背景色
 */
/* --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6); */

/* ============================================================================
   实用示例：常见布局调整场景
   ============================================================================ */

/* 场景 1：增加内容区域宽度（推荐用于宽屏显示器）
 *
 * :root {
 *   --vp-layout-max-width: 1600px;
 * }
 */

/* 场景 2：使用百分比宽度（更灵活的响应式布局）
 *
 * :root {
 *   --vp-layout-max-width: 90%;
 * }
 */

/* 场景 3：调整侧边栏和内容区域的比例
 *
 * :root {
 *   --vp-layout-max-width: 1600px;
 *   --vp-sidebar-width: 300px;
 * }
 *
 * 💡 说明：
 * - 总宽度：1600px
 * - 侧边栏：300px
 * - 内容区域：约 1300px（1600px - 300px）
 */

/* 场景 4：紧凑型布局（适合笔记本电脑）
 *
 * :root {
 *   --vp-layout-max-width: 1200px;
 *   --vp-sidebar-width: 240px;
 *   --vp-nav-height: 56px;
 * }
 */

/* 场景 5：全宽布局（最大化内容显示）
 *
 * :root {
 *   --vp-layout-max-width: 100%;
 * }
 *
 * .VPDoc .container {
 *   max-width: 100%;
 *   padding: 0 2rem;
 * }
 *
 * ⚠️ 注意：全宽布局可能导致文本行过长，影响阅读体验
 * 建议配合 .VPDoc 的 max-width 限制内容宽度
 */

/* ============================================================================
   变量之间的关系说明
   ============================================================================

   1. 内容区域实际宽度计算：
      实际内容宽度 ≈ --vp-layout-max-width - --vp-sidebar-width

   2. 响应式断点：
      - < 960px：移动设备布局，侧边栏折叠
      - >= 960px：桌面布局，侧边栏固定显示

   3. 层级关系（从低到高）：
      页脚(10) < 本地导航(20) < 侧边栏(25/60) < 顶部导航(30) <
      布局顶层(40) < 遮罩层(50)

   4. 修改建议：
      - 优先修改 --vp-layout-max-width 来调整整体宽度
      - 如需更精细控制，再调整 --vp-sidebar-width
      - 避免修改 z-index 变量，除非遇到层级冲突
      - 使用百分比宽度可以获得更好的响应式效果
   ============================================================================ */

/* ============================================================================
   内容宽度覆盖规则（解决 688px 限制问题）
   ============================================================================

   ⚠️ 问题说明：
   VitePress 默认的内容区域最大宽度被限制为 688px，这是由多个嵌套的 CSS 规则
   共同作用的结果。仅仅修改 --vp-layout-max-width 变量是不够的，还需要覆盖
   以下几个关键选择器的 max-width 属性。

   📊 默认宽度计算（在 1440px 窗口宽度下）：
   1. 整体布局：1440px
   2. 减去左右边距：1440 - 32 - 32 = 1376px
   3. 减去侧边栏：1376 - 240 = 1136px
   4. 减去右侧目录：1136 - 224 = 912px
   5. 减去内容左右边距：912 - 112 - 112 = 688px

   💡 解决方案：
   通过覆盖以下选择器的 max-width 属性，可以在宽屏显示器上获得更宽的内容区域。

   参考来源：
   - https://github.com/vuejs/vitepress/discussions/1646
   - https://github.com/vuejs/vitepress/discussions/1709
   ============================================================================ */

/* 1. 无侧边栏时的容器宽度
 * 说明：当页面没有左侧边栏时（如首页），容器的最大宽度
 * 默认值：约 1136px
 * 推荐值：1584px（适合 1920px 宽屏）/ 2000px（适合 2560px 宽屏）
 */
.VPDoc:not(.has-sidebar) .container {
  max-width: 2000px !important;
}

/* 2. 无侧边栏时的内容宽度
 * 说明：当页面没有左侧边栏时，主内容区域的最大宽度
 * 默认值：约 912px
 * 推荐值：1264px（适合 1920px 宽屏）/ 1600px（适合 2560px 宽屏）
 */
.VPDoc:not(.has-sidebar) .content {
  max-width: 1264px !important;
}

/* 3. 有右侧目录时的内容容器宽度（最重要）
 * 说明：当页面有右侧目录（Aside）时，内容容器的最大宽度
 * 这是导致 688px 限制的主要原因
 * 默认值：约 912px
 * 推荐值：1168px（适合 1920px 宽屏）/ 1500px（适合 2560px 宽屏）
 *
 * 💡 这是最关键的规则！
 * 如果你的内容区域被限制在 688px，主要就是这个选择器在起作用。
 */
.VPDoc.has-aside .content-container {
  max-width: 1168px !important;
}

/* 4. 通用容器边距重置
 * 说明：移除容器的默认边距，让内容更靠近边缘
 */
.VPDoc .container {
  margin: 0;
}

/* ============================================================================
   宽度调整建议
   ============================================================================

   根据你的显示器分辨率，可以参考以下推荐值：

   📱 1920px 宽屏（Full HD）：
   :root {
     --vp-layout-max-width: 90%;
   }
   .VPDoc:not(.has-sidebar) .container {
     max-width: 1584px !important;
   }
   .VPDoc:not(.has-sidebar) .content {
     max-width: 1264px !important;
   }
   .VPDoc.has-aside .content-container {
     max-width: 1168px !important;
   }

   🖥️ 2560px 宽屏（2K/QHD）：
   :root {
     --vp-layout-max-width: 90%;
   }
   .VPDoc:not(.has-sidebar) .container {
     max-width: 2000px !important;
   }
   .VPDoc:not(.has-sidebar) .content {
     max-width: 1600px !important;
   }
   .VPDoc.has-aside .content-container {
     max-width: 1500px !important;
   }

   🖥️ 3840px 宽屏（4K/UHD）：
   :root {
     --vp-layout-max-width: 90%;
   }
   .VPDoc:not(.has-sidebar) .container {
     max-width: 3000px !important;
   }
   .VPDoc:not(.has-sidebar) .content {
     max-width: 2400px !important;
   }
   .VPDoc.has-aside .content-container {
     max-width: 2200px !important;
   }

   ⚠️ 注意事项：
   1. 使用 !important 是必要的，因为需要覆盖 VitePress 的内联样式
   2. 这些修改不会影响移动端布局（< 960px），VitePress 会自动切换为响应式布局
   3. 建议保持内容宽度在合理范围内，过宽的文本行会影响阅读体验
   4. 可以使用浏览器开发者工具（F12）实时调整这些值，找到最适合你的宽度

   🔍 如何验证修改效果：
   1. 打开浏览器开发者工具（F12）
   2. 选择 Elements 标签
   3. 找到 <div class="VPDoc has-aside"> 元素
   4. 查看其子元素 <div class="content-container"> 的 Computed 样式
   5. 确认 max-width 值已经被成功覆盖
   ============================================================================ */

/* 表格样式 */
th,
td {
  /* white-space: nowrap !important; */
  /* 不让th，td内容换行显示 */
  width: 10%;
  /* 强制均匀分配宽度 */
}